<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ include file="../admin/authority.jsp" %>
<html>
<head>
<%@include file="headScriptHH.jsp"%>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/assets/js/hh/cs33000script.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/assets/js/share/componentAPI.js"></script>
<!-- END JAVASCRIPT -->
  
</head>

<body>
<input type="hidden" id="url_address" name="url_address" value="">
<input type="hidden" id="agent_browser" name="agent_browser" value="">
	<div class="wrapper">
		<!-- BEGIN Top-Bar -->
		<%@ include file="../fragments/header.jsp"%>
		<!-- END Top-Bar -->

		<div id="detail-area" class="clearfix">
			<!-- BEGIN SIDEMENU -->
			<div class="hidden-xs hidden-sm page-sidebar" id="side-menu-bar">
				<ul class="page-sidebar-menu">					

					<!-- <div id="displaymenu"></div>  -->
					<%@ include file="../admin/menu.jsp" %>

				</ul>
			</div>
		<!-- End SIDEMENU-->

			<div class="col-sm-12 col-xs-12" id="right-side">
				<div id="navigator-bar">
					<i class="fa fa-home"></i> หน้าหลัก <i
						class="fa fa-angle-right ml-5 mr-5"></i> บันทึกข้อมูลอ่านมาตร
				</div>
				<!--End navigator-bar-->
				<!-- Start detail-area -->
				<div>
					<div id="page-header" class="clearfix">
						<div>บันทึกข้อมูลอ่านมาตร</div>
					</div>
					<!-- Start form-detail -->
					<div class="form-list clearfix" style="margin-top: -30px">
						<div class="search-box no-radius">
							<!-- header -->
							<div class="form-group clearfix search-header no-radius">
								<div class="pull-left">ระบุข้อมูลการค้นหา</div>
								<div class="pull-right">
									<div id="hide-button">
										<i class="fa fa-chevron-circle-up"></i>
									</div>
								</div>
							</div>
							<!-- BOX-BODY -->
							<div id="box-body">
								<div class="form-group clearfix mt-20">
									<div class="col-sm-4 mt-5">
										<label for="exampleInputEmail1">เขต</label> <select
											class="form-control" id="inputZone">
											<option value="">-- เลือกเขต --</option>
										</select>
									</div>
									<div class="col-sm-4 mt-5">
										<label for="exampleInputEmail1">เส้นทาง</label> <select
											class="form-control" id="inputRoute">
											<option value="">-- เลือกเส้นทาง --</option>
										</select>
									</div>
									<div class="col-sm-4 mt-5">
										<label for="exampleInputEmail1">ทะเบียนผู้ใช้น้ำ</label> <input
											type="text" class="form-control" id="inputAccount"
											placeholder="ทะเบียนผู้ใช้น้ำ">
									</div>
								</div>
								<div class="form-group mt-20 clearfix search-footer no-radius">
									<div class="col-sm-12 text-center">
										<button type="button" class="btn btn-primary"
											onclick="searchData()">
											<i class="fa fa-search"></i> ค้นหา
										</button>
									</div>
								</div>
							</div>
							<!-- END BOX-BODY -->
							<div class="modal fade" id="failZoneModal" tabindex=""
								role="dialog" aria-labelledby="failModal" aria-hidden="true">
								<div class="modal-dialog" style="width:450px">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal"
												aria-hidden="true">&times;</button>
											<h4 class="modal-title">กรุณาเลือกข้อมูลให้ถูกต้อง</h4>
										</div>
										<div class="modal-body">
											<p ><span class="fa-stack fa-lg mr-10" style=" color:#FC0"> <i class="fa fa-exclamation-triangle fa-stack-2x"></i></span>กรุณาเลือกเขตและเส้นทางให้ถูกต้อง</p>
										</div>
										<div class="modal-footer" style="text-align: center;">

											<button type="button" class="btn btn-primary" onclick="getFocus()"><i class="glyphicon glyphicon-ok"></i> ตกลง</button>
										</div>
									</div>
								</div>
							</div>
							
							<div class="modal fade" id="failDateModal" tabindex=""
								role="dialog" aria-labelledby="failModal" aria-hidden="true">
								<div class="modal-dialog" style="width:450px">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal"
												aria-hidden="true">&times;</button>
											<h4 class="modal-title">กรุณาเลือกข้อมูลให้ถูกต้อง</h4>
										</div>
										<div class="modal-body">
											<div id="modal_content_date" align="center"><span class="fa-stack fa-lg mr-10" style=" color:#FC0"> <i class="fa fa-exclamation-triangle fa-stack-2x"></i></span>กรุณาเลือกวันที่อ่านน้ำรอบปัจจุบันให้ถูกต้อง</div>
										</div>
										<div class="modal-footer" style="text-align: center;">

											<button type="button" class="btn btn-primary"
												onclick="getFocus('datetimepicker1')"><i class="glyphicon glyphicon-ok"></i> ตกลง</button> 
										</div>
									</div>
								</div>
							</div>
							
							<div class="modal fade" id="failReadNumberModal" tabindex=""
								role="dialog" aria-labelledby="failModal" aria-hidden="true">
								<div class="modal-dialog"  style="width:650px">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal"
												aria-hidden="true">&times;</button>
											<h4 class="modal-title">กรุณากรอกข้อมูลให้ถูกต้อง</h4>
										</div>
										<div class="modal-body">
											<div id="modal_content_date"><span class="fa-stack fa-lg mr-10" style=" color:#FC0"> <i class="fa fa-exclamation-triangle fa-stack-2x"></i></span>กรุณากรอกข้อมูลให้ถูกต้อง ข้อมูลเป็นตัวเลขจำนวนเต็มไม่เกิน 4 หลัก ที่มีค่ามากกว่าหรือเท่ากับข้อมูลครั้งก่อนเท่านั้น</div>
										</div>
										<div class="modal-footer" style="text-align: center;">

											<button type="button" class="btn btn-primary" id="buttonOk"
												onclick="getFocus('readNumber')"><i class="glyphicon glyphicon-ok"></i> ตกลง</button> 
										</div>
									</div>
								</div>
							</div>
							
							<div class="modal fade" id="confirmSaveData" tabindex=""
								role="dialog" aria-labelledby="failModal" aria-hidden="true">
								<div class="modal-dialog" style="width: 450px">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal"
												aria-hidden="true">&times;</button>
											<h4 class="modal-title">บันทึกข้อมูลการอ่านมาตร</h4>
										</div>
										<div class="modal-body">
											<p ><span class="fa-stack fa-lg mr-10" style=" color:#FC0"> <i class="fa fa-exclamation-triangle fa-stack-2x"></i></span>ยืนยันการบันทึกข้อมูลการอ่านมาตร</p>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="saveData()"><i class="fa fa-floppy-o"></i> ยืนยัน</button>
											<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="glyphicon glyphicon-floppy-remove"></i> ยกเลิก</button>
										</div>
									</div>
								</div>
							</div>
							

						</div>


						<form name="" id="" action="" method="post">
							<input type="hidden" id="inputCheckZoneId" value="" /> <input
								type="hidden" id="inputCheckRouteId" value="" />

						</form>

					</div>

					<!-- End form-detail -->
					<div class="form-list" id="form-list" style="margin-top: -90px">
						<div class="list-detail-area">
							<h4 class="pull-left">
								<i class="fa fa-file-text-o"></i> จัดทำข้อมูลใบแจ้งหนี้
								ประจำเดือน <span class="comment"><label
									id="inputMaxMonth" style="font-weight: normal;"></label>/<label
									id="inputMaxYear" style="font-weight: normal;"></label></span>
							</h4>
							<div class="form-group pull-right mt-5">
								<div class="clearfix">
									<div class='input-group date pull-right' style="width: 220px">
										<input type='text' id='datetimepicker1' class="form-control"
											placeholder="วันที่อ่านน้ำ" data-provide="datepicker" data-date-language="th-th" onchange="iteration()" /> <span
											class="input-group-addon" id="spanDatetimepicker1"><span
											class="glyphicon glyphicon-calendar"></span> </span>
									</div>
									
									<div class="pull-right mt-5 mr-5">วันที่อ่านน้ำรอบปัจจุบัน
										:</div>
								</div>
							</div>

							<table id="InvoiceDataTable"
								class="stripe hover cell-border"
								cellspacing="0" width="100%">


<thead>
									<tr style="background-color: #399bca; color: white; font-size: 0.9em;">
										<th  rowspan="2"  style="border-right: 1px solid #999; border-bottom: 1px solid #999;text-align: center; font-weight: normal;">ลำดับ</th>
										<th  width="12%" rowspan="2"  style="border-right: 1px solid #999;border-bottom: 1px solid #999; text-align: center; font-weight: normal;">เขต</th>
										<th  width="11%" rowspan="2"  style="border-right: 1px solid #999;border-bottom: 1px solid #999; text-align: center;font-weight: normal;">เส้นทาง</th>
										<th  rowspan="2"  style="border-right: 1px solid #999;border-bottom: 1px solid #999; text-align: center;font-weight: normal;">รหัสผู้ใช้น้ำ</th>
										<th  colspan="2" style="border-right: 1px solid #999;border-bottom: 1px solid #999; text-align: center;font-weight: normal;">ข้อมูลครั้งก่อน</th>
										<th  style="border-right: 1px solid #999;border-bottom: 1px solid #999; text-align: center;font-weight: normal;">ข้อมูลปัจจุบัน</th>
										<th  rowspan="2"  style="border-right: 1px solid #999;border-bottom: 1px solid #999; text-align: center;font-weight: normal;">หน่วยน้ำ</th>
										<th  width="10%" colspan="2"  style="border-right: 1px solid #999;border-bottom: 1px solid #999; text-align: center;font-weight: normal;">วิธีการคำนวน</th>
										<th  width="10%" id="total" rowspan="2"  style="border-right: 1px solid #999;border-bottom: 1px solid #999; text-align: center;font-weight: normal;">รวมเป็นเงิน(บาท)
										</th>
									</tr>
									<tr style="background-color: #399bca; color: white; font-size: 0.9em;">
										<th style="border-right: 1px solid #999;border-bottom: 1px solid #999; text-align: center;font-weight: normal;">วันที่อ่านน้ำ</th>
										<th style="border-right: 1px solid #999;border-bottom: 1px solid #999; text-align: center;font-weight: normal;">เลขในมาตร</th>
										<th id="number" style="border-right: 1px solid #999;border-bottom: 1px solid #999; text-align: center;font-weight: normal;">เลขในมาตร</th>
									    <th style="border-right: 1px solid #999;border-bottom: 1px solid #999; text-align: center;font-weight: normal;">ปกติ</th>
									    <th style="border-right: 1px solid #999;border-bottom: 1px solid #999; text-align: center;font-weight: normal;">เฉลี่ย</th>
									</tr>
								</thead>



							</table>
							<div class="text-center mt-20">
								<button type="button" class="btn btn-primary" onclick="confirmSaveData()">
									<i class="fa fa-floppy-o"></i> บันทึก
								</button>
								<button type="submit" class="btn btn-primary" onclick="window.location.reload( true );">
									<i class="fa fa-refresh"></i> เริ่มใหม่
								</button>
							</div>
						</div>


					</div>
					<!-- End Form-list -->
				</div>
				<!-- End detail-area -->
				<div id="footer-detail">Copyright © สงวนลิขสิทธิ์ พ.ศ.2557 โดย
					การประปานครหลวง</div>
			</div>
		</div>
		<!-- End Detail-area-->
	</div>
	<!-- End Wrapper -->
	
	
	
	
</body>
</html>